<template>
  <div class="qr-code">
    <n-card title="二维码配置" size="medium">
      <pro-form
        v-model:form="setting"
        :options="options"
        :formInit="initSetting"
        :formObj="form"
      />
    </n-card>
    <n-card title="二维码效果" size="medium" style="margin-top: 20px">
      <div style="text-align: center">
        <pro-qr-code v-bind="qrSetting" />
      </div>
    </n-card>
  </div>
</template>

<script lang="ts" setup name="qrCode">
  import logo from '@/assets/logo.svg'

  // form配置对象
  const form = {
    'label-placement': 'left'
  }
  // 配置对象
  const setting = ref({})
  // 默认值
  const initSetting = ref({
    text: '我是二维码内容',
    correctLevel: 1,
    size: 200,
    margin: 20,
    colorDark: 'black',
    colorLight: 'white',
    logoBackgroundColor: '#78dbff',
    backgroundColor: 'white',
    logoScale: 0.5,
    logoMargin: 10,
    logoCornerRadius: 20,
    whiteMargin: true,
    dotScale: 0.5,
    autoColor: true
    // callback: (url, qid) => {
    //   console.log('url', url, qid)
    // }
  })
  // formItem配置
  const options = [
    {
      grid: {
        cols: '4'
      },
      columnItemList: [
        {
          formItem: {
            formType: 'input',
            label: '内容',
            key: 'text',
            rule: {
              required: true,
              message: '请输入二维码内容',
              trigger: ['input']
            },
            placeholder: '请输入二维码内容'
          }
        },
        {
          formItem: {
            formType: 'inputNumber',
            label: '大小',
            key: 'size',
            placeholder: '请输入大小'
          }
        },
        {
          formItem: {
            formType: 'inputNumber',
            label: '外边距',
            key: 'margin'
          }
        },
        {
          formItem: {
            formType: 'inputNumber',
            label: 'Logo边距',
            key: 'logoMargin',
            placeholder: '请输入Logo边距'
          }
        }
      ]
    },
    {
      grid: {
        cols: '4'
      },
      columnItemList: [
        {
          formItem: {
            formType: 'input',
            label: '实点的颜色',
            key: 'colorDark'
          }
        },
        {
          formItem: {
            formType: 'input',
            labelWidth: 100,
            label: '空白区的颜色',
            key: 'colorLight'
          }
        },
        {
          formItem: {
            formType: 'input',
            label: '背景色',
            key: 'backgroundColor'
          }
        },
        {
          formItem: {
            formType: 'input',
            labelWidth: 220,
            label: 'Logo背景色(需设置Logo边距)',
            key: 'logoBackgroundColor'
          }
        }
      ]
    },
    {
      grid: {
        cols: '4'
      },
      columnItemList: [
        {
          formItem: {
            formType: 'switch',
            label: '是否显示背景图片',
            labelWidth: 120,
            key: 'bgSrc'
          }
        },
        {
          formItem: {
            formType: 'switch',
            labelWidth: 120,
            label: '是否显示logo图片',
            key: 'logoSrc'
          }
        },
        {
          formItem: {
            formType: 'switch',
            labelWidth: 260,
            label: '是否显示外侧白色边框(需设置背景)',
            key: 'whiteMargin'
          }
        },
        {
          formItem: {
            formType: 'switch',
            labelWidth: 260,
            label: '背景图的主要颜色将作为实点的颜色',
            key: 'autoColor'
          }
        }
      ]
    },
    {
      grid: {
        cols: '3'
      },
      columnItemList: [
        {
          formItem: {
            formType: 'slider',
            label: 'Logo缩放',
            key: 'logoScale',
            max: 1,
            min: 0,
            step: 0.05,
            placeholder: '请输入Logo大小'
          }
        },
        {
          formItem: {
            formType: 'slider',
            label: '数据点缩小比例',
            labelWidth: 120,
            max: 1,
            min: 0,
            step: 0.05,
            key: 'dotScale',
            placeholder: '请输入数据点缩小比例'
          }
        },
        {
          formItem: {
            formType: 'inputNumber',
            label: 'Logo圆角半径',
            labelWidth: 100,
            key: 'logoCornerRadius',
            placeholder: '请输入Logo圆角半径'
          }
        }
      ]
    }
  ]
  // 二维码属性
  const qrSetting = computed(() => {
    const tempSetting = {}
    tempSetting.bgSrc = setting.value.bgSrc ? logo : ''
    tempSetting.logoSrc = setting.value.logoSrc ? logo : ''
    return { ...setting.value, ...tempSetting }
  })
</script>

<style lang="less" scoped></style>
